<template>
    <div class="city-form" >
        <el-form ref="cityForm" :model="cityForm" class="form-wrap" size="small"  :rules="enableValidate?cityRules : ''">
            <el-form-item :label="label" prop="provinceCode" >
                <el-select v-model="cityForm.provinceCode" filterable @change="queryCitys" placeholder="请选择地址">
                    <el-option
                        v-for="item in provinces"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" class="no_text" prop="cityCode">
                <el-select v-model="cityForm.cityCode" filterable @change="queryCounty" placeholder="请选择地址">
                    <el-option
                        v-for="item in citys"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" class="no_text" prop="countyCode">
                <el-select v-model="cityForm.countyCode" filterable @change="changeCounty" placeholder="请选择地址">
                    <el-option
                        v-for="item in countys"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {getDivision} from '@/admin/api/division'

    export default {
        name: "citySelect",
        props: {
            areaCode: {
                type: String,
                default: '440000-440300-440304'
            },
            label: {
                type: String,
                default: '地址'
            },
            enableValidate: {
                type: Boolean,
                default: true
            }
        },
        watch: {

            //解决父子组件动态传值  渲染速度超过数据请求速度
            areaCode:{
                handler: function (val) {
                    if (val) {
                        this.watchOff = false
                        let codes = val.split("-")
                        if (codes.length == 3) {
                            this.cityForm.provinceCode = codes[0]
                            this.queryCitys(codes[0])
                            this.cityForm.cityCode = codes[1]
                            this.queryCounty(codes[1])
                            this.cityForm.countyCode = codes[2]
                            this.changeCounty(codes[2])
                        }
                    }
                },
                deep: true,
            }
        },
        created() {
            this.queryProvince()
        },
        computed: {
            chArea: function () {
                let p = this.selectProvince ? this.selectProvince.label : ''
                let c = this.selectCity ? this.selectCity.label : ''
                let y = this.selectCounty ? this.selectCounty.label : ''
                return p + c + y
            }
        },
        data() {
            return {
                watchOff: true,
                cityForm: {
                    provinceCode: '',
                    cityCode: '',
                    countyCode: '',
                },
                provinces: [],
                citys: [],
                countys: [],
                selectProvince: '',
                selectCity: '',
                selectCounty: '',
                cityRules: {
                    provinceCode: [
                        { required: true, message: "请选择", trigger: "blur" },
                    ],
                    cityCode: [
                        { required: true, message: "请选择", trigger: "blur" },
                    ],
                    countyCode: [
                        { required: true, message: "请选择", trigger: "blur" },
                    ]
                },

            }

        },
        methods: {
            queryProvince() {
                getDivision({"lazy": true, parentId: "000000"}).then(rep => {
                    let rep_province = rep.data.data
                    this.provinces = rep_province.map(p => {
                        return {"label": p.divisionName, "value": p.divisionCode}
                    })
                })
            },
            //获取城市
            queryCitys(val) {
                //查找省市县名称
                getDivision({"lazy": true, parentId: val}).then(rep => {
                    let rep_city = rep.data.data
                    this.citys = rep_city.map(p => {
                        return {"label": p.divisionName, "value": p.divisionCode}
                    })
                    this.selectProvince = this.provinces.find(p => p.value == this.cityForm.provinceCode)
                    // this.$emit('changeArea', this.chArea, this.cityForm.provinceCode)
                })


            },
            changeCounty(val) {
                this.selectCounty = this.countys.find(p => p.value == this.cityForm.countyCode)
                if(this.chArea){
                    this.$emit('changeArea', this.chArea, this.cityForm.provinceCode + '-' + this.cityForm.cityCode + '-' + val)
                }
            },
            //获取县区
            queryCounty(val) {
                getDivision({"lazy": true, parentId: val}).then(rep => {
                    let rep_county = rep.data.data
                    this.countys = rep_county.map(p => {
                        return {"label": p.divisionName, "value": p.divisionCode}
                    })
                    this.selectCity = this.citys.find(p => p.value == this.cityForm.cityCode)
                    // this.$emit('changeArea', this.chArea, this.cityForm.provinceCode + '-' + val)
                })

            },
        }
    }
</script>
<style scoped lang="scss">
    
    @include formWrap(3);
    .city-form>form {
        padding: 0px;
    }
    .no_text {
        padding-top: 32px;
    }
</style>
